﻿@page
@{ Layout = "_Layout"; }

<el-card>
    <div slot="header" class="clearfix">
        <span>{{ id > 0 ? "修改" : "新增" }}用户组</span>
        <el-button style="float: right;padding:3px 0;" type="text" v-on:click="utils.closeLayer(false)"><i class="el-icon-close"></i></el-button>
    </div>
    <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-180) + 'px' }">
        <div style="margin-right:18px;">
            <el-form :size="euiSize" v-on:submit.native.prevent ref="form" :model="form" status-icon label-width="140px">
                <el-form-item label="用户组名称" prop="groupName" :rules="[{ required: true, message: '请输入名称' }]">
                    <el-input v-model="form.groupName"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.groupType" :rules="[{ required: true, message: '请选择类型' }]">
                        <el-option v-for="type in groupTypeSelects"
                                   :key="type.value"
                                   :label="type.label"
                                   :value="type.value">
                        </el-option>
                    </el-select>
                    <span class="tips" v-if="form.groupType==='Fixed'">在列表中安排用户</span>
                </el-form-item>
                <el-form-item label="组织范围" v-if="form.groupType==='Range'">
                    <el-row>
                        <el-col :span="10">
                            <el-input placeholder="输入关键字进行过滤"
                                      v-model="filterText">
                            </el-input>
                        </el-col>
                        <el-col :span="14" style="padding-left:10px;">
                            <el-checkbox v-model="checkStrictly" border>联动选择</el-checkbox>
                        </el-col>
                    </el-row>
                    <div style="height:10px;"></div>
                    <el-card shadow="hover">
                        <el-tree ref="organsTree"
                                 :data="organs"
                                 show-checkbox :check-strictly="!checkStrictly"
                                 node-key="guid"
                                 :default-checked-keys="checkdKeys"
                                 :default-expanded-keys="expandedKeys"
                                 :filter-node-method="filterNode"
                                 :props="{ label: 'name',disabled:true }">
                        </el-tree>
                    </el-card>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model.trim="form.description" :rows="3" resize="none"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="locked">
                    <el-select v-model="form.locked">
                        <el-option label="启用" :value="false"></el-option>
                        <el-option label="停用" :value="true"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

    </el-scrollbar>
</el-card>
<el-row align="center" style="margin-top:18px;">
    <el-col :span="24" align="center">
        <el-button icon="el-icon-check" :size="euiSize" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
        <el-button icon="el-icon-close" :size="euiSize" v-on:click="btnCancelClick">取 消</el-button>
    </el-col>
</el-row>

@section Scripts{
    <script src="/sitefiles/assets/js/admin/settings/usersGroupEdit.js" type="text/javascript"></script>
}